<template>
  <div ref="BarECharts" style="width: 100%;height: 240px"></div>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])
watch(() => props.tableData, (newVal) => {
  if (newVal) {
    nextTick(() => {
      init()
    })
  }
}, {immediate: true})


const init = () => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color:  ['#6395fa', '#63daab', '#657798', '#f7c12d', '#867bf1', '#76cbed'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'center',
        bottom: '0'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['40%', '55%'],
          avoidLabelOverlap: false,
          data: props.tableData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
}

</script>

<style lang="less" scoped>
</style>
